<template>
  <div class="text">
      <h3>旅游攻略</h3>
      <div class="desc">
          {{this.$store.state.arr2.text}}
      </div>
      <ul>
          <span>内容速览:</span>
          <li v-for="(v,i) in this.$store.state.arr2.arr1" :key="i">{{v.show}}</li>
      </ul>
      <p class="more" @click="list()">
          阅读更多
      </p>
  </div>
</template>

<script>
// import {homelink} from "@/api/homeapi.js"
export default {
    methods:{
        list(){
            this.$router.push("/cityList")
        }
    },
}
</script>

<style scoped>
    .text h3::before{
        content: "";
        display: inline-block;
        width: 4px;
        height: 15px;
        background-color: #ff9d00;
        vertical-align: middle;
        margin: 0 10px 3px 0;
    }
    .text h3{
        padding: 19px 0 15px 15px;
        position: relative;
        font-size: 0.45rem;
        color: #111;
        line-height: 1em;
        font-weight: normal;
    }
    .desc{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.4rem;
        margin: 0 0.4rem;
        color: #333;
        line-height: 1.6em;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        margin: 0 0.4rem;
        font-size: 0.4rem;
        line-height: 1.8em;
        color: #999;
    }
    li{
        margin-left: 0.45rem;
        color: #ff9d00;
    }
    .more{
        width: 3.5rem;
        height: 1.12rem;
        line-height: 1.12rem;
        font-size: .37333rem;
        color: #ff9d00;
        border: 1px solid #ff9d00;
        border-radius: 3px;
        margin: auto;
        margin-top: 0.4rem;
        text-align: center;
    }
</style>